import { Button, Checkbox, Form, Input, Radio } from 'antd'
import React from 'react'
import { useHistory } from 'react-router'
import styles from './index.module.css'

const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 }
}
const tailLayout = {
  wrapperCol: { offset: 8, span: 16 }
}

export default function Login() {
  const [value, setValue] = React.useState(1)
  const history = useHistory()

  const onChange = (e) => {
    console.log('radio checked', e.target.value)
    setValue(e.target.value)
  }
  const onFinish = (values: any) => {
    console.log('Success:', values)
    if (value === 1) {
      history.push('live_teacher')
    } else {
      history.push('live_student')
    }
  }

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo)
  }

  return (
    <div className={styles.login}>
      <Form {...layout} name="basic" initialValues={{ remember: true }} onFinish={onFinish} onFinishFailed={onFinishFailed}>
        <Form.Item label="女娲账号" name="username" rules={[{ required: false, message: '请输入你在直播间显示的昵称' }]}>
          <Input />
        </Form.Item>

        <Form.Item label="女娲密码" name="password" rules={[{ required: false, message: '请输入房间号' }]}>
          <Input />
        </Form.Item>

        <Form.Item {...tailLayout} name="remember" valuePropName="checked">
          <Checkbox>记住我</Checkbox>
        </Form.Item>
        <Form.Item {...tailLayout} name="sf" valuePropName="checked">
          <Radio.Group onChange={onChange} value={value}>
            <Radio value={1}>我来上课</Radio>
            <Radio value={2}>我来听课</Radio>
          </Radio.Group>
        </Form.Item>

        <Form.Item {...tailLayout}>
          <Button type="primary" htmlType="submit">
            登录
          </Button>
        </Form.Item>
      </Form>
    </div>
  )
}
